<script setup>
import {ref} from "vue";
import {ChineseDate} from "baitu";

defineOptions({ name: 'ChineseDate' })

const dateTime = ref(new Date())
const remark = "选择一个公历日期，获得农历名、干支、生肖、节气、节日、朝代等信息"
const chineseDate = ref()
const solarTerms = ref()
const festival = ref()
const allInfo = ref()

function generate() {
  chineseDate.value = new ChineseDate(dateTime.value);
  allInfo.value = chineseDate.value.getAllInfo()
  solarTerms.value = chineseDate.value.getSolarTerms()
  festival.value = chineseDate.value.getFestival()
}
</script>

<template>
  <tool-page title="农历日期" :value="chineseDate" @generate="generate" :remark="remark">
    <template #value>
      <div v-if="chineseDate">{{`[${allInfo.year.dynasty}] ${allInfo.year.eraName} ${allInfo.year.name} ${allInfo.year.ruler}`}}</div>
      {{chineseDate}}
      <div v-if="chineseDate">干支纪时：{{chineseDate.getCyclicalYMD()}}</div>
      <div v-if="solarTerms">节气：{{solarTerms.name}}</div>
      <div v-if="festival && festival.super && festival.super.length > 0">重要节日：{{festival.super.join('，')}}</div>
      <div v-if="festival && festival.common && festival.common.length > 0">普通节日：{{festival.common.join('，')}}</div>
      <div v-if="festival && festival.other && festival.other.length > 0">其他节日：{{festival.other.join('，')}}</div>
    </template>
    <template #operate>
      <DatePicker v-model="dateTime" type="date" split-panels placeholder="请选择日期"
                  style="width: 180px; margin-right: 10px"></DatePicker>
    </template>
    <template #buttonBefore>

    </template>
  </tool-page>
</template>

<style scoped lang="scss">

</style>
